<template>
	<view>
		<!-- 首页 -->
		<u-navbar :is-back="false" :border-bottom="false" title="柏瑞OA管理系统" title-color="#fff" :title-size="40">
		</u-navbar>
		<!-- 头部 -->
		<view class="header">
			<view v-if="headerTopStatus==1">
				<view>欢迎您：{{headerTop.depart.title||''}} {{headerTop.real_name||''}}</view>
				<view>{{dateTime}}</view>
			</view>
			<view v-else-if="headerTopStatus==2">请您先登录！</view>
		</view>
		<!-- 四校区导航 - 金刚区 -->
		<view class="campus">
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="item in liImg" :key="item.id" @click="goPages(item.url)">
					<image :src="item.images"></image>
					<view class="camName">{{item.schoolName}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 滚动通告 -->
		<view class="noticeBar" v-if="noticeBarStatus">
			<u-notice-bar type="none" :more-icon="true" mode="horizontal" :list="list" :speed="30" :is-circular="true"
				:play-state="paused1"></u-notice-bar>
		</view>
		<!-- 公告/学生状态 -->
		<view class="tabSwitching">
			<view class="tabs">
				<view @click="TabSwitch = 1" :class="TabSwitch==1?'TabTextColor':''">
					<image v-if="TabSwitch==1" src="@/static/announcementImg.png"></image>
					<image v-else src="@/static/announcementImg1.png"></image>公司公告
				</view>
				<view @click="TabSwitch = 2" :class="TabSwitch==2?'TabTextColor':''">
					<image v-if="TabSwitch==2" src="@/static/stateImg.png"></image>
					<image v-else src="@/static/stateImg1.png"></image>学生状态
				</view>
				<view @click="TabSwitch = 3" :class="TabSwitch==3?'TabTextColor':''">
					<image v-if="TabSwitch==3" src="@/static/onDutyImg.png"></image>
					<image v-else src="@/static/onDutyImg1.png"></image>部门执勤
				</view>
			</view>
			<view class="tabsContent">
				<!-- 公告查看 -->
				<view class="notice" v-if="TabSwitch==1">
					<view v-show="noticeNull==1">
						<u-empty text="未登录" mode="permission"></u-empty>
					</view>
					<view v-show="noticeNull==2" @click="sendNotice(noticeData)" class="noticeContext">
						<view>{{noticeData.title}}</view>
						<view>
							<view class="noticePeople">{{noticeData.send_user}}</view>
							<view>{{noticeData.created_at}}</view>
						</view>
					</view>
					<view v-show="noticeNull==3">
						<u-empty text="无公告" mode="list"></u-empty>
					</view>
				</view>
				<!-- 学生状态 -->
				<view class="studentStatus" v-if="TabSwitch==2">
					<u-collapse>
						<u-collapse-item :title="item.title" v-for="(item,index) in studentStatusList" :key="index">
							<view>学生总数：{{item.departCount}}人</view>
							<view @click="holidayBounced(item)">
								学生请假人数：{{item.longCount + item.shortCount}}人
								<u-icon style="margin-left: 10rpx;" name="question-circle" color="#FC9C18" size="30">
								</u-icon>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
				<!-- 部门执勤 -->
				<view v-if="TabSwitch==3">
					<view class="duty_card" v-for="(item,index) in onDuty" :key="index"
						@click="goDutyPage(item.title,item.duty)">
						<view>
							<view>{{item.title}}</view>
						</view>
						<view>
							<!-- 负责人 -->
							<view v-if="item.today.length!=0">
								<view class="headPeopleImg">
									{{item.today.duty_teacher}}
									<image v-if="item.today.sex==1" src="@/static/men.png" mode="widthFix"></image>
									<image v-else src="@/static/woman.png" mode="widthFix"></image>
								</view>
								<text
									@click.stop="callPhoneNumber(item.today.tea_phone)">{{item.today.tea_phone}}</text>
								<text>{{item.today.duty_time}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 学生状态，请假显示 -->
		<u-mask style="position: relative;" :show="modelShow" @click="modelShow = false">
			<view class="maskView">
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<view class="leave_number">短假有{{modelShowData.shortCount}}人</view>
					<view class="leave_number_list">
						<view v-for="(item,index) in modelShowData.shortDetail" :key="index">
							<view>{{item.name}}</view>
							<view @click.stop="callPhoneNumber(item.phone)">
								<text>个人电话</text>：{{item.phone||"无"}}
							</view>
							<view @click.stop="callPhoneNumber(item.parent_phone)">
								<text>监护人电话</text>：{{item.parent_phone||"无"}}
							</view>
							<view @click.stop="callPhoneNumber(item.teacher.mobile)">
								<text>班主任电话</text>：{{item.teacher.mobile||"无"}}{{' - '+item.teacher.real_name||""}}
							</view>
							<view>
								<text>请假事由</text>：{{item.reason||"无"}}
							</view>
						</view>
					</view>
					<view class="leave_number">长假有{{modelShowData.longCount}}人</view>
					<view class="leave_number_list">
						<view v-for="(item,index) in modelShowData.longDetail" :key="index">
							<view>{{item.name}}</view>
							<view @click.stop="callPhoneNumber(item.phone)">
								<text>个人电话</text>：{{item.phone||"无"}}
							</view>
							<view @click.stop="callPhoneNumber(item.parent_phone)">
								<text>监护人电话</text>：{{item.parent_phone||"无"}}
							</view>
							<view @click.stop="callPhoneNumber(item.teacher.mobile)">
								<text>班主任电话</text>：{{item.teacher.mobile||"无"}}{{' - '+item.teacher.real_name||""}}
							</view>
							<view>
								<text>请假事由</text>：{{item.reason||"无"}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		getCode,
		getUserInfo,
		loginToGetToken
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				dateTime: "", //日期时间显示
				headerTop: {}, //头部个人信息
				headerTopStatus: 1, //头部个人信息是否显示 -- 1是正常，2是未登录，3是无数据
				paused1: "paused", //控制滚动通告是否滚动
				liImg: [ //金刚区导航
					{
						schoolName: '通讯录',
						images: '../../static/addressbook.png',
						id: '001',
						url: "/pages/index/addressbook"
					}, {
						schoolName: '文件管理',
						images: '../../static/file.png',
						id: '002',
						url: "/pages/myBackstage/file"
					}, {
						schoolName: '备课管理',
						images: '../../static/proless.png',
						id: '003',
						url: "/pages/index/monkey"
					}, {
						schoolName: '学生管理',
						images: '../../static/student.png',
						id: '004',
						url: "/pages/myBackstage/student"
					},
					{
						schoolName: '泰安校区',
						images: '../../static/school1.png',
						id: '005',
						url: "/pages/index/addressbook"
					},
					{
						schoolName: '淄博校区',
						images: '../../static/school2.png',
						id: '006',
						url: "/pages/myBackstage/file"
					},
					{
						schoolName: '烟台校区',
						images: '../../static/school3.png',
						id: '007',
						url: "/pages/index/monkey"
					},
					{
						schoolName: '产业事业部',
						images: '../../static/school4.png',
						id: '008',
						url: "/pages/myBackstage/student"
					},
				],
				list: [], //滚动通告
				noticeBarStatus: true, //滚动公告是否显示
				getGreeting: '', //欢迎词

				TabSwitch: 1, //选项卡切换
				noticeData: {}, //公司公告
				noticeNull: '', //公告显示（0是请求错误、1是请登录、2是正常）
				modelShow: false, //学生状态模态框开关
				modelShowData: {}, // 学生状态模态框数据
				studentStatusList: [], //学生状态
				onDuty: [], //部门执勤
			}
		},
		methods: {
			goPages(url) { // 金刚区跳转详情
				this.$tourl(url)
			},
			sendNotice(item) { //公司公告跳转详情
				if (uni.getStorageSync('token')) {
					this.noticeNull = 2
					uni.navigateTo({
						url: `/pages/index/announcement?id=${item.id}`
					});
				} else {
					this.noticeNull = 1
				}
			},
			getAnnouncementList() { //获取公告数据
				this.$http(this.$api.announcementList).then((res) => {
					// 1是未登录、2是正常、3是无公告
					if (uni.getStorageSync('token')) {
						if (res.data.length != 0) {
							this.noticeNull = 2
							this.noticeData = res.data[0]
						} else {
							this.noticeNull = 3
						}
					} else {
						this.noticeNull = 1
					}
				})
			},
			getPersonalInformation() { //顶部个人信息获取
				this.$http(this.$api.userupWechat2).then((res) => {
					//1是正常，2是未登录
					if (uni.getStorageSync('token')) {
						this.headerTopStatus = 1
						this.headerTop = res.data
						uni.setStorageSync('real_name', this.headerTop.real_name);
					} else {
						this.headerTopStatus = 2
					}
				})
			},
			noticeBar() { //滚动通告
				this.$http(this.$api.noticeBar).then((res) => {
					if (uni.getStorageSync('token') && res.data.length != 0) {
						this.noticeBarStatus = true
						let arr = []
						for (var i = 0; i < res.data.length; i++) {
							arr.push(res.data[i].content)
						}
						this.list = arr
					} else {
						this.noticeBarStatus = false
					}
				})
			},
			//选项卡 - 部门执勤
			departmentDuty() {
				this.$http(this.$api.homePageDepartmentDuty).then(res => {
					this.onDuty = res.data.list
				})
			},
			// 选项卡 - 部门执勤 - 跳转页面
			goDutyPage(title, item) {
				this.$store.commit('DATYDATA', item)
				uni.navigateTo({
					url: `/pages/index/campusDuty?title=${title}`
				})
			},
			//部门执勤 - 拨打电话
			callPhoneNumber(item) {
				uni.makePhoneCall({
					phoneNumber: item
				})
			},
			//选项卡 - 学生状态
			studentsStatus() {
				this.$http(this.$api.StudentStatusHoliday).then(res => {
					this.studentStatusList = res.data.depart
				})
			},
			// 学生请假的详情
			holidayBounced(item) {
				this.modelShowData = item
				this.modelShow = true
			},
			currentTime() { //计算时间
				let time = new Date()
				let a = time.getFullYear()
				let b = time.getMonth() + 1
				let c = time.getDate()
				let d = time.getHours()
				let f = ""
				if (time.getDay() == 0) f = '星期天'
				else if (time.getDay() == 1) f = '星期一'
				else if (time.getDay() == 2) f = '星期二'
				else if (time.getDay() == 3) f = '星期三'
				else if (time.getDay() == 4) f = '星期四'
				else if (time.getDay() == 5) f = '星期五'
				else f = '星期六'
				this.dateTime = a + '年' + b + '月' + c + '日' + ' ' + d + '时' + ' ' + f
			}
		},
		onLoad() {
			// 本页可分享
			uni.showShareMenu({
				withShareTicket: true,
			})
			//登录
			loginToGetToken()
			uni.showLoading({
				title: "加载中...",
				icon: "none"
			})
			setTimeout(() => {
				this.getAnnouncementList() //公告数据
				this.getPersonalInformation() //个人信息
				this.noticeBar() //滚动通告
				this.studentsStatus()
				this.departmentDuty()
				uni.hideLoading()
				this.$http(this.$api.userupWechat2).then(res => {
					//存储用户pid
					if (res.code == 1) {
						uni.setStorageSync('userPid', res.data.role.pid);
					}
				})
			}, 1500)
			setTimeout(() => { //滚动通告等三秒后在进行滚动
				this.paused1 = "play"
			}, 2000)
		},
		onShow() {
			this.currentTime()
		}
	}
</script>

<style>
	/* 金刚区图片大小不一,如改变,请自行调改 */
	u-grid u-grid-item:nth-child(2)>view>.u-grid-item-box>image {
		transform: scale(1.2);
	}

	u-grid u-grid-item:nth-child(7)>view>.u-grid-item-box>image {
		transform: scale(0.9);
	}

	* {
		margin: 0;
		padding: 0;
	}

	/* 头部 */
	.header {
		background: linear-gradient(to right, #A471FC, #77B4F7);
		color: #fff;
		padding: 0.1rpx 10px 100rpx;
	}

	.header>view {
		line-height: 35px;
	}

	/* 金刚区导航 */
	.campus {
		padding: 20px 10px;
		border-radius: 35px 35px 0 0;
		border-bottom: #f4f4f5 1px solid;
		background-color: #fff;
		margin-top: -35px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.camName {
		margin-top: 10px;
	}

	.u-grid-item-box {
		padding: 20px 0 0 !important;
	}

	.campus image {
		display: block;
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto;
	}

	/* 滚动通告 */
	.noticeBar {
		padding: 0px 10px 5px;
		box-shadow: 0 5px 10px #f4f4f5;
		margin: 0 0 30rpx;
	}

	.u-notice-content {
		padding-left: 10px !important;
	}

	.u-left-icon>view>text {
		background-image: -webkit-linear-gradient(right, #9C6CEE, #78AAE8) !important;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	/* 公告/学生状态/部门执勤 */
	.tabSwitching {
		padding: 0 10px;
	}

	.tabs {
		height: 90rpx;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}

	.tabs>view {
		margin: 0 20rpx;
		line-height: 55rpx;
		padding-bottom: 10rpx;
		transition: all 0.2s;
		display: flex;
		align-items: center;
	}

	.tabs>view>image {
		width: 30rpx;
		height: 30rpx;
		display: block;
		margin-right: 5rpx;
	}

	.TabTextColor {
		color: #8D99F8;
		border-bottom: #8D99F8 3px solid;
	}

	.tabsContent {
		border-radius: 5px;
		box-shadow: 0 0 5px #c8c9cc;
		padding: 10px 15px;
	}

	.notice>view {
		/* 公司公告 */
		margin: 10px 0;
	}

	.noticeContext>view:first-child {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-align: justify;
		margin-bottom: 15px;
	}

	.noticeContext>view:last-child {
		text-align: right;
	}

	.noticePeople {
		margin-bottom: 15rpx;
	}

	.u-collapse-body {
		padding-left: 20rpx;
	}

	.u-collapse-item {
		border-bottom: #c8c9cc 1px dashed !important;
	}

	u-collapse-item:last-child>.u-collapse-item {
		border-bottom: none !important;
	}


	.maskView {
		/* 学生状态请假模态框 */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90vw;
		height: 800rpx;
		background-color: #fff;
		padding: 40rpx 20rpx;
		border-radius: 20rpx;
		line-height: 40rpx;
		overflow: auto;
	}

	.leave_number {
		border-left: #8B97FA 10rpx solid;
		padding-left: 15rpx;
		font-size: 30rpx;
		font-weight: 900;
		margin-bottom: 15rpx;
	}

	.leave_number_list {
		margin-left: 25rpx;
		margin-bottom: 30rpx;
		border-bottom: #c8c9cc 2rpx dashed;
	}

	.leave_number_list>view {
		margin-bottom: 20rpx;
	}

	.leave_number_list>view>view>text {
		display: inline-block;
		width: 155rpx;
		text-align: justify;
		text-align-last: justify;
	}

	.leave_number_list>view>view:first-child {
		font-weight: 900;
	}

	.duty_card {
		padding: 20rpx 0;
		border-bottom: #c8c9cc 1rpx dashed;
	}

	.duty_card:last-child {
		border-bottom: none;
	}

	.duty_card>view:first-child {
		/* 分区 */
		padding: 10rpx 0 20rpx;
		font-size: 35rpx;
	}

	.duty_card>view:first-child>view {
		border-left: #8B97FA 8rpx solid;
		padding-left: 15rpx;
	}

	.duty_card>view:last-child {
		line-height: 50rpx;
	}

	.duty_card>view:last-child>view {
		/* 执勤负责人 */
		display: flex;
		justify-content: space-around;
	}

	.headPeopleImg {
		display: flex;
		align-items: center;
	}

	.headPeopleImg>image {
		width: 28rpx;
		margin-left: 5rpx;
	}
</style>
